<template>
  <div class="card">
    <a href="#">
      <img src="../assets/vue.svg" class="logo" alt="" />
    </a>
    <el-form
      ref="ruleFormRef"
      style="max-width: 600px"
      :model="ruleForm"
      status-icon
      :rules="rules"
      label-width="auto"
      class="demo-ruleForm"
    >
      <el-form-item label="账号" prop="account">
        <el-input v-model="ruleForm.account" type="text" autocomplete="off" />
      </el-form-item>
      <el-form-item label="密码" prop="pass">
        <el-input
          v-model="ruleForm.pass"
          type="password"
          autocomplete="off"
        />
      </el-form-item>

      <el-form-item label="验证码" prop="code">
        <el-input v-model="ruleForm.code" style="width: 80%" />
        <img src="../assets/vue.svg" style="width: 20%; height: 18px" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)" class="btn">
          登录
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script  setup>
import { reactive, ref } from 'vue'
import {useRouter} from 'vue-router'
import {login} from '../api/user'

const ruleFormRef = ref()
const router=useRouter()

const checkCode = (rule, value, callback) => {
  if (!value) {
    return callback(new Error('请输入验证码'))
  }

  setTimeout(() => {
      if (value!='9527') {
        callback(new Error('验证码不正确'))
      } else {
        callback()
      }
  }, 1000)
}

const validateAccount = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入账号'))
  } else {
    callback()
  }
}

const validatePass = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入密码'))
  } else {
    callback()
  }
}

const ruleForm = reactive({
  account: '',
  pass: '',
  code: '',
})

const rules = reactive({
  account: [{ validator: validateAccount, trigger: 'blur' }],
  pass: [{ validator: validatePass, trigger: 'blur' }],
  code: [{ validator: checkCode, trigger: 'blur' }],
})

const submitForm = (formEl) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      console.log('此处应该调用axios访问后端代码，然后根据返回结果路由对应视图')
     // x=await login(formEl)
     // console.log(x)
      router.replace('/home')
    } else {
      console.log('error submit!')
    }
  })
}

</script>


<style scoped>
.card {
  width: 36vw;
}
.logo {
  height: 4em;
  padding: 1em;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}

:deep(.el-form-item .el-input__inner) {
  font-size: 20px;
}
.demo-ruleForm {
  margin: 5px 40px;
}
.btn {
  flex: 1;
  margin: 20px 50px;
  font-size: 24px;
}
</style>
